<template>
  <div>
    <div class="header-box">
      <ul>
        <li>
          <div
              style="color: rgb(93, 142, 233);font-size: 14px;display: flex;align-items: center;height: 60px;font-weight: 600;">
            <el-image style="width: 40px;height: 25px;align-items: center;margin-left: 10px;"
                      :src="require('@/assets/logo.png')"></el-image>
            知行互联管理端
          </div>

        </li>
        <li>
          <div class="user-info">
            <div style="margin-right: 10px;">
              <el-avatar :size="30" :src="user.avatar"></el-avatar>
            </div>
            <div style="font-size: 12px;" @click="showDrawer">
              {{ user.nickname }}
            </div>
            <div style="font-size: 12px;margin-left: 10px;" @click="logout">退出</div>
          </div>

        </li>
      </ul>
    </div>

    <el-drawer
        :visible.sync="drawer"
    >
      <div class="drawer-main">
        <div class="password-form">
          <el-form :model="user" ref="passwordRef" :rules="rules">
            <el-form-item prop="oldPassword" label="旧密码">
              <el-input type="password" placeholder="旧密码" v-model="user.oldPassword"/>
            </el-form-item>
            <el-form-item prop="newPassword" label="新密码">
              <el-input type="password" placeholder="新密码" v-model="user.newPassword"/>
            </el-form-item>
            <el-form-item prop="confirmPassword" label="确认密码">
              <el-input type="password" placeholder="确认密码" v-model="user.confirmPassword"/>
            </el-form-item>
            <!-- <el-form-item class="form-btn">
              <el-button @click="updatePassword">确认提交</el-button>
              <el-button @click="goBcak">返回</el-button>
            </el-form-item> -->
          </el-form>
        </div>
        <div class="op-btn">
          <el-button @click="updatePassword">修改密码</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>

import {post, get} from "@/utils/api";
import md5 from 'js-md5'

export default {
  data() {

    const checkConfirmPassword = (rule, value, callback) => {
      if (value !== this.user.newPassword) {


        return callback(new Error('第二次输入的密码与第一次输入的密码不一致'));
      }
      return callback();


    };

    return {
      logo: 'https://tohone.oss-cn-guangzhou.aliyuncs.com/def/logo.png',
      user: {},
      drawer: false,
      flag: false,
      rules: {
        oldPassword: [
          {required: true, message: '请输入旧的密码', trigger: 'blur'}
        ],
        newPassword: [
          {required: true, message: '请输入新的密码', trigger: 'blur'}
        ],
        confirmPassword: [
          {required: true, message: '请二次确认密码', trigger: 'blur'},
          {validator: checkConfirmPassword, trigger: 'blur'}
        ]
      }

    }
  },
  methods: {
    showDrawer() {
      this.drawer = true;
    },
    showPasswordForm() {
      this.$refs['passwordRef'].resetFields();
      this.flag = true;
    },
    logout() {
      const logout = get({
        url: '/base-auth/oauth/logout'
      });
      //退出登录
      logout.then(res => {
        if (res.code === 200) {
          this.$message.success(res.message);
          sessionStorage.removeItem('token');
          this.$router.push('/login');
          return;
        }
      })
    },
    // 更新密码
    updatePassword() {
      this.$refs['passwordRef'].validate((valid) => {
        if (valid) {
          const promise = post({
            url: '/base-user/back/user/update/password',
            data: {newPassword: md5(this.user.newPassword), oldPassword: md5(this.user.oldPassword)}
          });
          promise.then(res => {
            if (res) {
              if (res.code === 200) {
                this.$message.success(res.message);
                this.drawer = false;
                this.$message.success('密码修改成功需要重新登录~')
                this.logout();
              } else {
                this.$message.error(res.message);
              }
            }
          });
        }
        this.flag = false;
      })


    },
    getUserInfo() {
      const promise = get({
        url: '/base-user/back/user/info'
      });
      promise.then(res => {
        if (res.code === 200) {
          this.user = res.data;
        }
      })
    },
    goBcak() {
      this.flag = false;
    }
  },
  mounted() {
    this.getUserInfo();
  }

}
</script>

<style scoped>
.header-box {
  width: 100%;
  min-height: 59px;
  box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
  display: flex;
  justify-content: center;
  background-color: #fff;
  border-bottom: 1px solid #dcdfe6;

}

ul {
  background-color: #fff;

  width: 100%;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
}

Ul > li {
  cursor: pointer;

}

.user-info {
  display: flex;
  justify-content: center;
  width: 160px;
  justify-items: center;
  align-items: center;
}

.drawer-main {
  padding-left: 20px;
  padding-right: 20px;
}

.form-btn, .op-btn {
  width: 100%;
  text-align: center;
}


</style>